"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import { ChevronLeft, ChevronRight } from "lucide-react"
import Link from "next/link"

const slides = [
  {
    id: 1,
    image: 'https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749621599170.jpg',
    alt: "考前练题库 - 立即前往，勤学苦练，高分相见",
    link: "/lianti",
  },
  {
    id: 2,
    image: 'https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749621466977.jpg',
    alt: "我要上课 - 聆听业内专家解惑",
    link: "/courses",
  },
  {
    id: 3,
    image: 'https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749621709438.jpg',
    alt: "我要考试 - 聆听业内专家解惑",
    link: "/examination",
  },
]

export default function Carousel() {
  const [current, setCurrent] = useState(0)
  const [loaded, setLoaded] = useState(false)

  // 修复后的预加载函数 - 使用原生Image对象
  useEffect(() => {
    const preloadImages = () => {
      slides.forEach(slide => {
        const img = new window.Image() // 使用原生Image对象
        img.src = slide.image
      })
      setLoaded(true)
    }

    preloadImages()
  }, [])

  // 自动轮播
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrent((current) => (current + 1) % slides.length)
    }, 6000) // 调整为6秒轮播一次
    
    return () => clearInterval(timer)
  }, [])

  const nextSlide = () => {
    setCurrent((current + 1) % slides.length)
  }

  const prevSlide = () => {
    setCurrent((current - 1 + slides.length) % slides.length)
  }

  return (
    <div className="bg-gray-100 py-6">
      <div className="mx-auto -mt-3">
        {!loaded ? (
          <div className="h-[350px] sm:h-[180px] md:h-[200px] lg:h-[320px] flex items-center justify-center">
            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-red-600"></div>
          </div>
        ) : (
          <div className="relative h-[350px] sm:h-[180px] md:h-[200px] lg:h-[320px] overflow-hidden">
            {slides.map((slide, index) => (
              <Link
                key={slide.id}
                href={slide.link}
                className={`absolute inset-0 transition-opacity duration-700 ${
                  index === current ? "opacity-100" : "opacity-0"
                }`}
              >
                <div className="relative w-full h-full">
                  <Image
                    src={slide.image}
                    alt={slide.alt}
                    fill
                    className="object-cover"
                    priority={index === 0} // 首张图片高优先级加载
                    quality={80} // 优化图片质量
                    sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 80vw"
                    placeholder="blur"
                    blurDataURL=""
                  />
                </div>
              </Link>
            ))}

            <button
              onClick={prevSlide}
              className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-black/20 rounded-full flex items-center justify-center hover:bg-black/30 transition-colors"
              aria-label="Previous slide"
            >
              <ChevronLeft className="w-6 h-6 text-white" />
            </button>

            <button
              onClick={nextSlide}
              className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-black/20 rounded-full flex items-center justify-center hover:bg-black/30 transition-colors"
              aria-label="Next slide"
            >
              <ChevronRight className="w-6 h-6 text-white" />
            </button>

            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
              {slides.map((_, index) => (
                <button
                  key={index}
                  onClick={() => setCurrent(index)}
                  className={`w-2 h-2 rounded-full transition-colors ${index === current ? "bg-white" : "bg-white/50"}`}
                  aria-label={`Go to slide ${index + 1}`}
                />
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}